<template>
  <div class="page-container">
    <div class="operators">
      <el-input
        style="width: 200px; margin-right: 10px"
        clearable
        @clear="monitorPartnersListApi"
        v-model.trim="searchParams.partnerName"
        placeholder="请输入设备组名称"
      ></el-input>
      <el-select
        style="width: 200px; margin-right: 10px"
        v-model="searchParams.status"
        @change="monitorPartnersListApi"
        clearable
        placeholder="请选择设备组状态"
      >
        <el-option
          v-for="(item, index) in statusOpts"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        style="width: 260px; margin-right: 10px"
        maxlength="3"
        clearable
        @clear="monitorPartnersListApi"
        v-model.trim="searchParams.ip"
        placeholder="请输入设备入口IP或出口IP"
      ></el-input>
      <el-button type="primary" @click="monitorPartnersListApi">查询</el-button>
      <el-button type="primary" @click="editHandle">新增</el-button>
    </div>
    <el-table
      :data="tableData"
      :height="tableHeight"
      style="width: 100%; margin-bottom: 20px"
      :row-class-name="addRowClass"
      align="center"
      border
    >
      <el-table-column prop="partnerName" label="设备组名称"></el-table-column>
      <el-table-column
        prop="status"
        :formatter="statusFormatter"
        label="状态"
      ></el-table-column>
      <el-table-column
        prop="partnerRemark"
        label="设备组备注"
      ></el-table-column>

      <el-table-column
        prop="monitorNums"
        label="理论滞留车辆数"
      ></el-table-column>
      <el-table-column
        prop="monitorSeconds"
        label="理论行驶时间(秒)"
      ></el-table-column>
      <el-table-column prop="maxPercent" label="预警比例值"></el-table-column>

      <el-table-column
        prop="enterCameraName"
        label="入口设备名称"
      ></el-table-column>
      <el-table-column
        prop="enterCameraIp"
        label="入口设备IP"
      ></el-table-column>
      <el-table-column
        prop="enterCameraRemark"
        label="入口设备备注"
      ></el-table-column>

      <el-table-column
        prop="outCameraName"
        label="出口设备名称"
      ></el-table-column>
      <el-table-column prop="outCameraIp" label="出口设备ip"></el-table-column>
      <el-table-column
        prop="outCameraRemark"
        label="出口设备备注"
      ></el-table-column>
      <el-table-column prop="initEnterNum" label="入口初始值"></el-table-column>
      <el-table-column prop="initOutNum" label="出口初始值"></el-table-column>

      <el-table-column label="操作" align="center" width="220" fixed="right">
        <template slot-scope="scope">
          <!-- <el-button
            @click="deleteHandle(scope.row.id)"
            type="danger"
            size="small"
            >删除</el-button
          > -->
          <el-button @click="editUnit(scope.row)" type="primary" size="small"
            >编辑</el-button
          >
          <el-button
            v-if="[4].includes(scope.row.status)"
            @click="monitorPartnersStatus(scope.row, 5)"
            type="primary"
            size="small"
            >排查中</el-button
          >
          <el-button
            v-if="[5, 6].includes(scope.row.status)"
            @click="monitorPartnersStatus(scope.row, 1)"
            type="primary"
            size="small"
            >重新设防</el-button
          >
          <el-button
            v-if="[1, 2, 3, 4].includes(scope.row.status)"
            @click="monitorPartnersStatus(scope.row, 6)"
            type="primary"
            size="small"
            >停止设防</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.currentPage"
        :page-sizes="[10, 20, 50, 80]"
        :page-size="searchParams.pageSize"
        :total="count"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div> -->

    <Edit
      @closeDialog="closeDialog"
      title="设备组"
      :formData="formData"
      :unitOpts="unitOpts"
      v-if="monitorPartnersVisible"
      :dialogVisible="monitorPartnersVisible"
    />
  </div>
</template>

<script>
import {
  monitorPartnersList,
  monitorPartnersDelete,
  monitorPartnersStatus,
} from "@/api/videos/monitorPartners";
import { autoTableHeight } from "@/utils/tools";
import Edit from "./edit.vue";
export default {
  data() {
    return {
      searchParams: {
        partnerName: "",
        ip: "",
        currentPage: 1,
        pageSize: 300,
      },
      formData: {},
      monitorPartnersVisible: false,
      tableData: [],
      count: 0,
      tableHeight: 600,
      unitOpts: [],
      unitIndex: undefined,

      statusOpts: [
        {
          label: "设防中",
          value: 1,
        },
        {
          label: "滞留车辆数预警",
          value: 2,
        },
        {
          label: "滞留时间预警",
          value: 3,
        },
        {
          label: "警报中",
          value: 4,
        },
        {
          label: "排查中",
          value: 5,
        },
        {
          label: "停止设防",
          value: 6,
        },
      ],
    };
  },
  created() {
    autoTableHeight(280, (e) => {
      this.tableHeight = e;
    });
    this.monitorPartnersListApi();
  },
  methods: {
    monitorPartnersStatus(row, status) {
      let data = {
        id: row.id,
        status,
      };
      monitorPartnersStatus(data).then((res) => {
        this.monitorPartnersListApi();
      });
    },

    statusFormatter(row, column, cellValue) {
      return this.statusOpts.filter((item) => item.value == cellValue)[0].label;
    },
    editUnit(row) {
      this.formData = row;
      this.monitorPartnersVisible = true;
    },
    editHandle() {
      this.formData = {};
      this.monitorPartnersVisible = true;
    },

    monitorPartnersListApi() {
      let data = { ...this.searchParams };
      monitorPartnersList(data).then((res) => {
        let { data, count } = res.data;
        this.count = count;
        this.tableData = data;
      });
    },
    addRowClass(row, column, cellValue) {
      if (row.row.status == 4) {
        return "high-danger";
      }
    },
    handleSizeChange(val) {
      this.searchParams.pageSize = val;
      this.monitorPartnersListApi();
    },
    handleCurrentChange(val) {
      this.searchParams.currentPage = val;
      this.monitorPartnersListApi();
    },
    closeDialog(type, isRefresh) {
      this[type] = false;
      isRefresh && this.monitorPartnersListApi();
    },
  },
  components: {
    Edit,
  },
};
</script>

<style lang="scss">
.el-table__body .el-table__row.hover-row td {
  background-color: transparent !important;
  cursor: pointer; /* 如果您希望保持鼠标悬停时的光标样式 */
}
.high-danger {
  background-color: #e27d7d !important;
  color: #fff !important;
}

.el-table button:nth-child(n + 2) {
  margin-top: 10px !important;
}
</style>
